<template>
  <div class="addressView">
    <header>
      <div class="left" @click="$router.back()"></div>
      <p>管理收获地址</p>
    </header>

    <div class="content" v-if="address">
      <div class="item" v-for="vl in address" :key="vl.id">
        <div class="top">
          <div class="name">{{ vl.name }}</div>
          <div class="text">
            <div class="address one-txt-cut">
              {{ vl.province + vl.city + vl.county + vl.addressDetail }}
            </div>
            <div class="tel">{{ vl.tel }}</div>
          </div>
        </div>
        <div class="bottom">
          <div class="toggle">
            <div :class="['logo', { con: vl.isDefault }]"></div>
            <span>默认地址</span>
          </div>
          <div class="right">
            <router-link
              tag="div"
              :to="'/changeAddress?id=' + vl.id"
              class="change"
            >
              <div class="logo"></div>
              <div class="text">编辑</div>
            </router-link>
            <div class="del">
              <div class="logo"></div>
              <div class="text">删除</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <router-link tag="div" to="/changeAddress" class="add"
      >+新建地址</router-link
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      property: "value",
      userInfo: null,
      address: null,
    };
  },
  methods: {
    getUserInfoFun() {
      let user = localStorage.getItem("HL_user");
      this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      if (user) {
        this.address = this.userInfo[user].address;
      }
    },
  },
  created() {
    this.$emit("hide");
    this.getUserInfoFun();
  },
};
</script>

<style lang="scss" scoped>
.addressView {
  height: 100%;
  background: #f9f9f9;

  > .content {
    > .item {
      background: #fff;
      position: relative;
      margin-bottom: 10px;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #c2c2c2;
        transform: scaleY(0.5);
      }

      &:nth-of-type(n + 2)::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background: #c2c2c2;
        transform: scaleY(0.5);
      }

      > .top {
        padding: 25px 20px 30px;
        position: relative;

        > .name {
          margin-bottom: 15px;
          font-size: 13px;
          line-height: 13px;
        }

        > .text {
          display: flex;
          align-items: center;
          font-size: 11px;
          line-height: 14px;

          > .address {
            flex: 1;
            color: #c9c9c9;
          }

          > .tel {
            margin-right: 50px;
          }
        }

        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background: #e7e7e7;
          transform: scaleY(0.5);
        }
      }

      > .bottom {
        display: flex;
        justify-content: space-between;
        height: 42px;
        line-height: 42px;
        padding-left: 20px;
        padding-right: 10px;

        > .toggle {
          display: flex;
          align-items: center;
          font-size: 12px;

          > .logo {
            width: 16px;
            height: 16px;
            margin-right: 10px;
            background: url(http://www.hlamall.cn/img/mobile-site/gobal/choice.png)
              no-repeat;
            background-size: cover;

            &.con {
              background-position: -16px 0;
            }
          }
        }

        > .right {
          display: flex;
          font-size: 12px;

          > div {
            margin-left: 20px;
            display: flex;
            align-items: center;
          }

          .logo {
            width: 18px;
            height: 18px;
            margin-right: 4px;
          }

          > .change {
            > .logo {
              background: url(http://www.hlamall.cn/img/mobile-site/gobal/edit.png)
                no-repeat;
              background-size: contain;
            }
          }

          > .del {
            .logo {
              background: url(http://www.hlamall.cn/img/mobile-site/gobal/delete.png)
                no-repeat;
              background-size: contain;
            }
          }
        }
      }
    }
  }

  > .add {
    height: 44px;
    width: 100%;
    line-height: 44px;
    position: fixed;
    bottom: 0;
    font-size: 14px;
    color: #fff;
    background: #cb3340;
    text-align: center;
  }
}
</style>